<template>
  <div class="ebook">
    <h3 v-if="!this.$route.query.url" style="text-align: center; margin-top: 200px;">当前没有阅读任何书籍</h3>
    <div class="read-wrapper" v-else>
      <div id="reader" class="reader"></div>
      <div class="mask">
        <div class="left" @click="prevPage()"></div>
        <div class="center" @click="showMenu"></div>
        <div class="right" @click="nextPage()"></div>
      </div>
    </div>
    <!-- 菜单 -->
    <!-- <div class="menu" v-show="menu">
      <div>目录</div>
      <div>进度</div>
      <div>主题</div>
      <div>字体</div>
    </div> -->
  </div>
</template>

<script>
import Epub from "epubjs";
global.ePub = Epub;
export default {
  name: "EBook",
  data() {
    return {
      menu: false
    }
  },
  methods: {
    //电子书的解析和渲染
    showEpub() {
      //生成book
      this.book = new Epub("http://" + this.$route.query.url);
      // this.book = new Epub('http://42.192.230.166:8080/bookFile/epubTest.epub')
      //生成rendition，通过renderTo方法
      this.rendition = this.book.renderTo("reader", {
        // width: window.innerWidth,
        height: window.innerHeight - 100,
        width: '100%',
        // height:'800px'

      });
      //通过rendition.display渲染电子书
      this.rendition.display();

    },
    // 翻页
    prevPage: function () {
      this.rendition.prev();
    },
    nextPage: function () {
      this.rendition.next();
    },
    showMenu() {
      this.menu = !this.menu
    },
    show(ev){
      if (ev.keyCode==13) {
        alert('你按了回车键！')
      }
    }
  },
  mounted() {
    this.showEpub();
  },
};
</script>

<style scoped lang="scss">
.ebook {
  position: relative;
  .read-wrapper {
    .reader {
      width: 90%;
      margin: 0 auto;
    }
    .mask {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 100;
      height: 100%;
      width: 100%;
      display: flex;
      .left {
        flex: 0 0 30%;
      }
      .center {
        flex: 1;
      }
      .right {
        flex: 0 0 30%;
      }
    }
  }
  .menu {
    position: relative;
    z-index: 200;
    bottom: 0;
    height: 50px;
    width: 100%;
    border-top: 1px solid #ccc;
    display: flex;
    justify-content: space-around;
    align-items: center;
    text-align: center;
  }
}
</style>
